<template>
    <div class="addbook">
        <!-- 顶部栏 -->
        <div class="add_header">
            <p class="add_tltle">添加记事本</p>
            <p class="add_save">保存</p>
        </div>

        <!-- 输入框 -->
        <div class="inp">
            <span class="iconfont icon-shuben"></span>
            <input ref="inp" type="text" placeholder="点击这里输入本子的名字">
        </div>

        <!-- 选择喜欢的图标 -->
        <div class="fav_icon">
            <div class="fav_icon_top">
                <span class="iconfont icon-xihuan"></span>
                <p class="title">选择你喜欢的图标</p>
            </div>
            <!-- 图标 -->
            <div class="icon_list">
                <div v-for="item in iconList" :class="`${iconId == item.id ? 'icon_item active' : 'icon_item'}`"
                    @click="selIcon(item.id)" :key="item.id">
                    <img :src="`${item.icon_src}`" alt="">
                </div>
            </div>
        </div>

        <!-- 选择封面 -->
        <div class="book_cover">
            <div class="cover_top">
                <span class="iconfont icon-wj"></span>
                <p class="title">选择一个封面</p>
            </div>
            <!-- 封面 -->
            <div class="cover_list">
                <div :class="`${coverId == item.id ? 'cover_item active' : 'cover_item'}`" v-for="item in bookCover"
                    :key="item.id" :style="{ backgroundImage: `url(${item.picUrl})`}"
                    @click="selCover(item.id, item.picUrl)"></div>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="comBtn">
            <van-button size="large" plain type="info" @click="saveChoose">保存</van-button>
        </div>
    </div>
</template>

<script>
import { get } from "@/https/request";
import { Dialog } from 'vant';
export default {
    name: 'AddBook',
    data() {
        return {
            iconList: [
                { id: 1, icon_src: require('@/static/img/icon/love.png') },
                { id: 2, icon_src: require('@/static/img/icon/toolbox.png') },
                { id: 3, icon_src: require('@/static/img/icon/huojian.png') },
                { id: 4, icon_src: require('@/static/img/icon/dangao.png') },
                { id: 5, icon_src: require('@/static/img/icon/xingxing.png') },
                { id: 6, icon_src: require('@/static/img/icon/diqiu.png') },
                { id: 7, icon_src: require('@/static/img/icon/yinyue.png') },
                { id: 10, icon_src: require('@/static/img/icon/zhuanshi.png') },
                { id: 11, icon_src: require('@/static/img/icon/qianbao.png') },
                { id: 12, icon_src: require('@/static/img/icon/youxiji.png') },
                { id: 13, icon_src: require('@/static/img/icon/rili1.png') },
                { id: 14, icon_src: require('@/static/img/icon/rili2.png') },
            ],
            iconId: 1,
            iconSrc: '',
            bookTitle: '',
            coverId: 1,
            coverUrl: 'http://192.168.35.43:3005/static/books/img/book1.jpg',
            bookCover: []
        }
    },
    methods: {
        selIcon(id) {
            this.iconId = id
            console.log(this.iconId);
        },
        // 获取封面
        async initCover() {
            await get('http://192.168.35.43:3005/books/b_cover')
                .then((data) => {
                    this.bookCover = data.result
                })
        },
        // 选择封面
        selCover(id, url) {
            this.coverId = id
            this.coverUrl = url
        },
        // 保存
        saveChoose() {
            let title = this.$refs.inp.value
            if (title.length == 0) {
                console.log("输入框为空");
                Dialog({ message: '请输入笔记本名字(✪ω✪)' });
                return
            } else {
                get('http://192.168.35.43:3005/books/b_add',
                    {
                        title: this.$refs.inp.value,
                        book_cover: this.coverUrl,
                        book_icon: this.iconId
                    })
                this.$refs.inp.value = ''
                this.$emit('show-addCmp',false)
            }
        }
    },
    created() {
        this.initCover()
    }
}
</script>

<style lang="scss" scoped>
@import "@/static//common/base.scss";
@import "@/assets/iconfont/iconfont.css";

.addbook {
    .add_header {
        width: 100%;
        height: 80px;
        background-color: $bgColor;
        display: flex;
        align-items: center;

        .add_tltle {
            color: rgb(255, 255, 255);
            font-weight: 600;
            font-size: 22px;
            margin-left: 50px;
        }

        .add_save {
            color: #fff;
            font-size: 18px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-left: 160px;
        }
    }

    // 输入框
    .inp {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #ccc;

        .iconfont {
            font-size: 22px;
            color: rgb(122, 122, 122);
            font-weight: 600;
            margin-left: 10px;
        }

        input {
            font-size: 18px;
            flex-grow: 1;
            margin-left: 10px;
            border-bottom: 2px solid $bgColor;
            padding: 2px;
            caret-color: $color;
        }

        input::-webkit-input-placeholder {
            color: rgb(186, 185, 185);
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: rgb(186, 185, 185);
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: rgb(186, 185, 185);
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: rgb(186, 185, 185);
        }
    }

    // 图标选择
    .fav_icon {
        padding: 10px 10px;
        border-bottom: 1px solid #ccc;

        .fav_icon_top {
            display: flex;

            .icon-xihuan {
                font-size: 24px;
                color: rgb(183, 37, 137);
            }

            .title {
                font-size: 18px;
                margin-left: 10px;
                color: rgb(122, 122, 122);
            }
        }

        .icon_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            justify-items: center;
            margin-top: 10px;

            .icon_item {
                width: 40px;
                height: 40px;
                // background-color: #000;
                margin: 8px;

                img {
                    width: 100%;
                }
            }

            .icon_item.active {
                border-radius: 40%;
                border: 2px solid rgb(24, 210, 220);
            }
        }
    }

    // 封面
    .book_cover {
        padding: 10px 10px;
        border-bottom: 1px solid #ccc;

        .cover_top {
            display: flex;

            .icon-wj {
                font-size: 20px;
                color: rgb(183, 37, 137);
            }

            .title {
                font-size: 18px;
                margin-left: 10px;
                color: rgb(122, 122, 122);
            }
        }

        .cover_list {
            padding: 5px;
            display: grid;
            // flex-wrap: wrap;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 10px;

            .cover_item {
                height: 120px;
                background-size: cover;
                border-radius: 3px 10px 10px 3px;
            }

            .cover_item.active {
                border: 3px solid rgb(24, 210, 220);
            }
        }
    }

    .comBtn {
        margin-top: 10px;
    }
}
</style>